import 'package:flutter/material.dart';
import 'package:flutter_bilibili/core/extension/int_extension.dart';
import 'package:flutter_swiper_null_safety/flutter_swiper_null_safety.dart';
import 'package:provider/provider.dart';

import '../../../core/model/live_room_model.dart';
import '../../../core/model/live_rooms_model.dart';
import '../../../core/viewmodel/live_room_view_model.dart';
import 'live_room_item.dart';

class HYLiveWangZheRongYaoScreen extends StatefulWidget {
  const HYLiveWangZheRongYaoScreen({Key? key}) : super(key: key);

  @override
  State<HYLiveWangZheRongYaoScreen> createState() =>
      _HYLiveWangZheRongYaoScreenState();
}

class _HYLiveWangZheRongYaoScreenState
    extends State<HYLiveWangZheRongYaoScreen> {
  @override
  Widget build(BuildContext context) {
    return Consumer<HYLiveRoomViewModel>(
      builder: (ctx, liveRoomsVM, child) {
        if (liveRoomsVM.wzryRoomList.isEmpty) {
          return const Center(
            child: Text("加载中...."),
          );
        }

        ///前三条数据为轮播图的数据，后面是一行两个的直播间
        return buildLiveRoomList(liveRoomsVM.wzryRoomList);
      },
    );
  }

  ///轮播图
  Widget buildLiveSwiperCarousel(List<RoomListList> data) {
    return ClipRRect(
      borderRadius: BorderRadius.circular(4.px),
      child: Container(
        margin: EdgeInsets.only(bottom: 8.px),
        height: 130.px, //这里的轮播图组件必须包裹在有高度的控件或者设置比例
        child: Swiper(
          itemBuilder: (ctx, index) {
            return Image.network(
              data[index].cover,
              fit: BoxFit.cover,
            );
          },
          itemCount: data.length,
          indicatorLayout: PageIndicatorLayout.SCALE,
          autoplayDelay: 3000,
          pagination: SwiperPagination(
              alignment: Alignment.bottomRight,
              margin:
                  EdgeInsets.only(left: 0, right: 8.px, bottom: 8.px, top: 0)),
          fade: 1.0,
          autoplay: true,
          scrollDirection: Axis.horizontal,
        ),
      ),
    );
  }

  ///所有直播
  Widget buildLiveRoomList(List<RoomListList> data) {
    return CustomScrollView(
      slivers: [
        ///轮播图
        SliverPadding(
          padding: EdgeInsets.only(top: 8.px, left: 8.px, right: 8.px),
          sliver: SliverList(
            delegate: SliverChildBuilderDelegate(
              (ctx, index) {
                ///一个长度的轮播图
                return buildLiveSwiperCarousel(data.sublist(0, 3));
              },
              childCount: 1,
            ),
          ),
        ),

        ///card界面
        SliverPadding(
          padding: EdgeInsets.symmetric(horizontal: 8.px),
          sliver: SliverGrid(
            delegate: SliverChildBuilderDelegate((ctx, index) {
              RoomListList tempData = data[index];
              return HYLiveRoomItem(LiveRoomModel(
                areaV2Name: tempData.areaV2Name,
                cover: tempData.cover,
                roomid: tempData.roomid,
                face: tempData.face,
                watchedShowTextLarge: tempData.watchedShow.textLarge,
                title: tempData.title,
                uName: tempData.uname,
                upId: tempData.uid,
              ));
            }, childCount: data.length),
            gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
              crossAxisCount: 2,
              childAspectRatio: 1.0,
            ),
          ),
        )
      ],
    );
  }
}
